Status Bars

hr.icon

画面の上端に表示されるステータスバーには、時間、キャリア、バッテリー残量など、端末の現在の状態に関する有益な情報が表示されます。

ステータスバーに表示される情報は、デバイスやシステム構成によって異なります。

システムで提供されるステータスバーを使用する。

人々は、ステータスバーがシステム全体で一貫していることを期待しています。

ステータスバーをカスタムせずに配置してください。

https://gyazo.com/e808a126955b3aed60bba70d2c934353

https://gyazo.com/bef9056a52464ae262a1c5f0bc45fca2

ステータスバーのスタイルをアプリのデザインに合わせる。

ステータスバーのテキストとインジケーターのビジュアルスタイルは、ライトまたはダークのいずれかになり、アプリ全体で設定することも、異なる画面に対して個別に設定することもできます。

明るい色のコンテンツには暗い色のステータスバーが、暗い色のコンテンツには明るい色のステータスバーが効果的です。

ステータスバーの下のコンテンツを目立たなくする。

デフォルトでは、ステータスバーの背景は透明で、下のコンテンツが透けて見えるようになっています。

ステータスバーを読みやすくし、その背後にあるコンテンツがインタラクティブであることを示唆しないようにします。

これには、いくつかの一般的なテクニックがあります。

アプリでナビゲーションバーを使用し、自動的にステータスバーの背景を表示し、ステータスバーの下にコンテンツが表示されないようにします。

ステータスバーの背後に、グラデーションや単色のカスタム画像を表示する。

ステータスバーの背後にぼかし表示を配置する。

フルスクリーンメディアの表示時に、ステータスバーを一時的に非表示にする。

ユーザーがメディアに集中しようとしているときに、ステータスバーがあると気が散ることがあります。

これらの要素を一時的に非表示にすることで、より没入感のある体験を提供できます。

たとえば、写真アプリでは、ユーザーがフルスクリーンの写真をブラウズするときに、ステータスバーとその他のインターフェイス要素を非表示にします。

https://gyazo.com/1af2a80aff8a5182329769a97719fe97

ステータスバーを恒久的に隠さないようにする。

ステータスバーがないと、時間を確認したり、Wi-Fi接続があるかどうかを確認したりするために、ユーザーはアプリから離脱しなければなりません。

シンプルでわかりやすいジェスチャーを使用して、非表示にしたステータスバーを再表示させましょう。

写真アプリでフルスクリーンの写真をブラウズしているときに、シングルタップするとステータスバーが再び表示されます。